<template>
	<view class="content">
		<u-row customStyle="margin-bottom: 10px">
			<!-- <div class="line">
			</div> -->
			<u-col span="2">
				<u-button text="线上" :type="line=='online'?'primary':''" @click="lineWay"></u-button>
			</u-col>
			<u-col span="2">
				<u-button text="线下" :type="line=='offline'?'primary':''" @click="lineWay"></u-button>
			</u-col>
			<u-col span="6">
				<u--input placeholder="搜索商品" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			</u-col>
			<u-col span="2">
				<u-button v-if="arrangement=='list'" icon="list" @click="arrangement='grid'"></u-button>
				<u-button v-if="arrangement=='grid'" icon="grid" @click="arrangement='list'"></u-button>
			</u-col>
		</u-row>
		<u-tabs :list="classify" @click="click"></u-tabs>
		<view class="arrangement">
			<u-list v-if="arrangement=='list'" :height="screenHeight-160" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in goods" :key="index" @click="detailWay(item)">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="3">
							<u-image :src="item.imageUrl" width="80px" height="80px"></u-image>
						</u-col>
						<u-col span="6">
							<u--text :text="item.name" bold></u--text>
							<u--text :lines="3" :text="item.describe"></u--text>
						</u-col>
						<u-col span="3">
							<u-tag :text="item.post?'包邮':'自费'" plain size="mini" type="warning"></u-tag>
							<u--text mode="price" decoration="line-through" :text="item.priceHis"></u--text>
							<u--text mode="price" color="#ff0000" bold :text="item.priceNew"></u--text>
						</u-col>
					</u-row>
				</u-list-item>
			</u-list>
			<scroll-view v-if="arrangement=='grid'" scroll-y :style="{'height': (screenHeight-'160')+'px'}"
				@scrolltolower="scrolltolower">
				<view class="list">
					<view class="item" v-for="(item, index) in goods" :key="index" @click="detailWay(item)">
						<u-image :src="item.imageUrl" width="160px" height="160px"></u-image>
						<div class="price">
							<u--text :text="item.name" bold></u--text>
							<u-tag :text="item.post?'包邮':'自费'" plain size="mini" type="warning"></u-tag>
						</div>
						<view class="price">
							<u--text mode="price" decoration="line-through" :text="item.priceHis"></u--text>
							<u--text mode="price" color="#ff0000" bold align="right" :text="item.priceNew"></u--text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import router from '@/api/router';
	const screenHeight = ref(0)
	uni.getSystemInfo({
		success: (res) => {
			// const screenWidth = res.windowWidth; // 屏幕宽度，单位为px
			screenHeight.value = res.windowHeight; // 屏幕高度，单位为px
			// console.log('屏幕宽度：', screenWidth);
			console.log('屏幕高度：', screenHeight);
		},
	});
	const line = ref('online') //"online"线上 "offline"线下
	const arrangement = ref("grid") //排列方式 list 单列 grid 双列
	const classify = ref([{
			value: 0,
			name: '全部'
		},
		{
			value: 1,
			name: '家具百货'
		},
		{
			value: 2,
			name: '特色服务'
		},
		{
			value: 3,
			name: '其他'
		},
		{
			value: 4,
			name: '数码电子'
		},
		{
			value: 5,
			name: '包装'
		}
	])
	const from = ref({
		pageNo: 1,
		pageSize: 10
	})
	const goods = ref([{
		imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		post: 1
	}, {
		imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		post: 0
	}, {
		imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
		name: '商品名称',
		describe: '描述描述描述描述描述描述描述描述',
		priceNew: 123.00,
		priceHis: 234.99,
		post: 0
	}])
	// onLoad(() => {})
	const lineWay = () => {
		line.value == 'online' ? line.value = 'offline' : line.value = 'online'
		from.value.pageNo = 0
	}
	const scrolltolower = () => {
		from.value.pageNo++
		console.log("底部触发加载更多---", from.value);
	}
	const detailWay = (item) => {
		console.log("进入商品详情---", item);
		router.navigateTo({
			url: '/pageB/detail/detail?goods=' + item
		})
	}
	const gainGoods = async () => {
		const res = await
		console.log("获取商品列表---");
	}
</script>


<style lang="scss" scoped>
	.list {
		width: 100%;
		display: flex;
		justify-items: center;
		flex-wrap: wrap;
		background-color: #f4feff;

		.item {
			// width: 50%;
			padding: 15rpx;

			.price {
				display: flex;
				padding: 10rpx 0;
				justify-content: space-between;
			}
		}
	}
</style>